<template>
  <el-card class="box-card">
    <template #header>
      <span>
        治疗级别
        <icon-help title="治疗级别" />
      </span>
    </template>
    <div ref="chartRef" :style="{ width: width, height: height }"></div>
  </el-card>
</template>
<script lang="ts" setup>
  import { Ref, ref, watch, onMounted } from 'vue'
  import { useECharts } from '@/hooks/web/useECharts'
  import type { EChartsOption } from 'echarts'
  import { useStore } from 'vuex'
  import iconHelp from '../icon-help/index.vue'
  const animationDuration = 300
  const chartRef = ref<HTMLDivElement | null>(null)
  const { setOptions, getInstance, resize } = useECharts(
    chartRef as Ref<HTMLDivElement>,
    'macarons'
  )

  const props = defineProps({
    data: {
      type: Object,
      default: {},
    },
    width: {
      // eslint-disable-next-line no-undef
      type: String as PropType<string>,
      default: '100%',
    },
    height: {
      // eslint-disable-next-line no-undef
      type: String as PropType<string>,
      default: '300px',
    },
  })
  const store = useStore()
  watch(
    () => store.getters.treatmentLevel,
    (val) => {
      console.log('treatmentLevel val =' + JSON.stringify(val))
      if (val) {
        // const { legendData, seriesData } = props.data
        const { good, goodRate, part, partRate, bad, badRate } = val
        const legendData = ['控制良好率', '部分控制率', '未控制率']
        const seriesData = [
          { value: good, name: '控制良好率', id: 2 },
          { value: part, name: '部分控制率', id: 1 },
          { value: bad, name: '未控制率', id: 0 },
        ]
        const seriesDataTmp = {
          tooltip: {
            trigger: 'item',
            backgroundColor: 'rgba(255,255,255,0.8)',
            axisPointer: {
              type: 'shadow',
            },
            formatter: (params: any) => {
              return (
                params.name +
                '<br/>' +
                params.marker +
                ' ' +
                params.data.name +
                ' 共' +
                params.data.value +
                '人次'
              )
            },
          },
          grid: {
            top: '0',
          },
          // legend: {
          //   bottom: '0',
          //   data: legendData,
          // },
          series: [
            {
              name: '百分比',
              type: 'pie',
              // top: -20,
              radius: '80%',
              center: ['50%', '50%'],
              roseType: 'radius',
              label: {
                formatter: '{b}' + '{d}' + '%',
              },
              // height: '80%',
              data: seriesData,
              animationType: 'scale',
              animationEasing: 'exponentialInOut',
              animationDuration,
            },
          ],
        }
        setOptions(seriesDataTmp as EChartsOption)
      }
    },
    { immediate: true }
  )

  watch(
    () => store.getters.sidebar.opened,
    async (val) => {
      console.log('treatmentLevel size change')
      // await nextTick()
      setTimeout(() => {
        resize()
      }, 500)
    },
    { immediate: true }
  )
  const emit = defineEmits(['select'])
  onMounted(() => {
    const myChart = getInstance()
    console.log('myChart =' + myChart)
    myChart?.on('click', function (params) {
      const { data, dataIndex } = params as {
        data: { id: number; name: string }
        dataIndex: number
      }
      emit('select', { name: '治疗级别', level: data.id })
    })
  })
</script>
<style lang="scss" scoped>
  .box-card {
    // width: 50%;
    margin-bottom: 22px;
  }
</style>
